import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts'
const Bar = ({text,subtext}) => {
  const dom = useRef()
  const chartInit = () => {
    const myCharts = echarts.init(dom.current)
    myCharts.setOption({
      title: {
        text,
        subtext
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
  useEffect(() => {
    chartInit()
    return () => {

    };
  }, []);
  return (
    <div>
      <div className='echart_main' style={{ height: '500px',width:'1000px'}} ref={dom}></div>
    </div>
  );
}

export default Bar;
